"use client";

import React, { useEffect } from 'react';
import { Button, Checkbox, Form, FormProps, Input, App } from "antd";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { loginCardConfig } from './config';

type FieldType = {
  user_name?: string;
  password?: string;
  remember?: boolean;
};

export interface LoginCardProps {
  onFinish?: FormProps<FieldType>["onFinish"];
  onFinishFailed?: FormProps<FieldType>["onFinishFailed"];
  loading?: boolean;
  form?: any;
}

const LoginCard: React.FC<LoginCardProps> = ({
  onFinish,
  onFinishFailed,
  loading = false,
  form
}) => {
  
  // 添加CSS样式以覆盖Ant Design默认样式
  useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      .ant-checkbox-checked .ant-checkbox-inner {
        background-color: #6366f1 !important;
        border-color: #6366f1 !important;
      }
      .ant-checkbox-wrapper:hover .ant-checkbox-inner,
      .ant-checkbox:hover .ant-checkbox-inner,
      .ant-checkbox-input:focus + .ant-checkbox-inner {
        border-color: #6366f1 !important;
      }
      .ant-input-affix-wrapper-focused {
        border-color: rgba(99, 102, 241, 0.6) !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
      }
      .ant-form-item-has-error .ant-input-affix-wrapper,
      .ant-form-item-has-error .ant-input-affix-wrapper-focused {
        border-color: #ff4d4f !important;
        box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1) !important;
      }
      /* 添加按钮样式覆盖 */
      .ant-btn-primary {
        background: linear-gradient(to right, #6366f1, #4f46e5) !important;
        border: none !important;
      }
      .ant-btn-primary:hover {
        background: linear-gradient(to right, #4f46e5, #4338ca) !important;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return (
    <div className="w-full max-w-md px-4 z-10">
      {/* 3D卡片 */}
      <div className="transform-gpu transition-all duration-400 ease-out rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 hover:rotate-x-5 hover:rotate-y-5 overflow-hidden relative" 
           style={{ transformStyle: 'preserve-3d', perspective: '1000px', backdropFilter: 'blur(4px)' }}>
        {/* 卡片内容区 */}
        <div className="bg-gradient-to-br from-gray-900/80 to-gray-800/90 backdrop-blur-lg border border-indigo-500/15 rounded-2xl p-8 relative z-10 overflow-hidden">
          {/* 卡片背景光效 */}
          <div className="absolute -top-1/2 -left-1/2 w-[200%] h-[200%] bg-radial-gradient pointer-events-none opacity-60 -z-10"
               style={{ 
                 background: 'radial-gradient(circle at center, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.05) 30%, transparent 70%)' 
               }}></div>
               
          {/* Logo和标题 */}
          <div className="text-center mb-4">
            {/* 机器人图标 */}
            <div className="mx-auto w-[50px] h-[60px] flex flex-col items-center justify-center relative">
              {/* 机器人头部 */}
              <div className="w-[40px] h-[30px] bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl relative flex items-center justify-around px-[5px] shadow-md shadow-indigo-600/30">
                {/* 机器人眼睛 - 左眼（添加眨眼动画） */}
                <div className="eye-container w-[8px] h-[8px] rounded-full bg-white/90 flex items-center justify-center relative overflow-hidden" style={{ animation: 'blinkLeft 4s ease-in-out infinite' }}>
                  <div className="absolute w-[4px] h-[4px] rounded-full bg-gray-900/80"></div>
                </div>
                {/* 机器人眼睛 - 右眼（添加眨眼动画，略微错开） */}
                <div className="eye-container w-[8px] h-[8px] rounded-full bg-white/90 flex items-center justify-center relative overflow-hidden" style={{ animation: 'blinkRight 4.5s ease-in-out infinite' }}>
                  <div className="absolute w-[4px] h-[4px] rounded-full bg-gray-900/80"></div>
                </div>
              </div>
              {/* 机器人身体 - 添加微弱的悬浮动画 */}
              <div className="w-[30px] h-[25px] bg-gradient-to-br from-indigo-600 to-indigo-700 -mt-1 rounded-md flex flex-col items-center justify-around py-1 shadow-md shadow-indigo-600/20" style={{ animation: 'hover 3s ease-in-out infinite' }}>
                {/* 机器人按钮 - 添加脉冲动画 */}
                <div className="w-[6px] h-[6px] rounded-full bg-white/60" style={{ animation: 'pulse 2s ease-in-out infinite' }}></div>
                <div className="w-[6px] h-[6px] rounded-full bg-white/60" style={{ animation: 'pulse 2s ease-in-out 0.5s infinite' }}></div>
              </div>
              {/* 添加一个小光效 */}
              <div className="absolute w-[40px] h-[40px] rounded-full bg-indigo-500/10 -z-10" style={{ 
                animation: 'lightEffect 8s linear infinite',
                background: 'radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.05) 60%, transparent 70%)'
              }}></div>
            </div>
            <h2 className="text-2xl font-semibold mt-3 text-white">{loginCardConfig.title}</h2>
            {/* <p className="text-indigo-300 text-sm mt-1">
              {loginCardConfig.subtitle}
            </p> */}
          </div>

          {/* 登录表单 */}
          <Form
            form={form}
            name="login"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            size="large"
            className="w-full"
          >
            <Form.Item
              name="user_name"
              rules={[{ required: true, message: loginCardConfig.usernameRequiredMessage }]}
            >
              <div className="relative mb-2">
                <Input
                  prefix={<UserOutlined className="text-indigo-400" />}
                  placeholder={loginCardConfig.usernamePlaceholder}
                  className="bg-gray-900/60 border border-indigo-500/20 rounded-lg text-white/90 px-4 py-3 transition-all shadow-sm hover:border-indigo-500/60 focus:border-indigo-500/60 focus:shadow-indigo-500/10 focus:shadow-sm"
                />
              </div>
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: loginCardConfig.passwordRequiredMessage }]}
            >
              <div className="relative mb-2">
                <Input.Password
                  prefix={<LockOutlined className="text-indigo-400" />}
                  placeholder={loginCardConfig.passwordPlaceholder}
                  className="bg-gray-900/60 border border-indigo-500/20 rounded-lg text-white/90 px-4 py-3 transition-all shadow-sm hover:border-indigo-500/60 focus:border-indigo-500/60 focus:shadow-indigo-500/10 focus:shadow-sm"
                />
              </div>
            </Form.Item>

            <Form.Item>
              {/* <div className="flex justify-between items-center mb-4">
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox className="text-indigo-300 ">
                    <div className="text-white">{loginCardConfig.rememberMeText}</div>
                  </Checkbox>
                </Form.Item>
              </div> */}
              <button
                type="submit"
                disabled={loading}
                className="w-full h-12 bg-gradient-to-r from-indigo-500 to-indigo-600 border-none rounded-lg text-white font-semibold tracking-wide transition-all shadow-md shadow-indigo-600/30 relative overflow-hidden hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-600/40 hover:from-indigo-600 hover:to-indigo-700 active:translate-y-0.5 flex items-center justify-center"
              >
                {loading ? (
                  <div className="flex items-center">
                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>处理中...</span>
                  </div>
                ) : (
                  loginCardConfig.loginButtonText
                )}
              </button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default LoginCard; 